<template>
  <div>
    <!-- 基础柱状图容器，固定尺寸确保显示稳定 -->
    <Echart
        :options="options"
        id="simpleBarChart"
        height="480px"
        width="100%"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart' // 引入基础Echart组件

export default {
  name: 'SimpleBarChart',
  components: { Echart },
  props: {
    // 仅接收柱状图必需数据，默认值避免报错
    cdata: {
      type: Object,
      default: () => ({
        category: [], // 横轴：产品名称
        barData: []   // 纵轴：订购量
      })
    }
  },
  computed: {
    // 用计算属性简化配置，避免watch深度监听
    options() {
      return {
        // 1. 基础提示框：仅显示核心信息
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.7)',
          textStyle: { color: '#fff' },
          formatter: '{b}<br/>订购量：{c} 件' // 直接显示产品名+订购量
        },

        // 2. 简化图例：仅保留1项，位置固定
        legend: {
          data: ['产品订购量'],
          textStyle: { color: '#B4B4B4' },
          top: 10,
          left: 'center'
        },

        // 3. 网格布局：简单配置，避免复杂计算
        grid: {
          left: '10%',
          right: '5%',
          bottom: '30%', // 预留横轴文字空间
          top: '15%'
        },

        // 4. 横轴：仅保留核心样式
        xAxis: {
          type: 'category',
          data: this.cdata.category,
          axisLine: { color: '#B4B4B4' },
          axisLabel: {
            color: '#B4B4B4',
            rotate: 30 // 解决文字重叠，仅保留必要优化
          }
        },

        // 5. 纵轴：简化配置，显示单位
        yAxis: {
          type: 'value',
          axisLine: { color: '#B4B4B4' },
          axisLabel: {
            color: '#B4B4B4',
            formatter: '{value} 件'
          },
          min: 0 // 确保数据对比准确
        },

        // 6. 核心柱状图：去除复杂渐变，用纯色简化
        series: [{
          name: '产品订购量',
          type: 'bar',
          barWidth: 22,
          itemStyle: { color: '#4895ef' }, // 单一蓝色，简洁清晰
          data: this.cdata.barData
        }]
      }
    }
  }
}
</script>